<template>
  <div :class="generalClass">
    <component
      :is="$myProps.componentName"
      v-bind="$myProps"
      @click.native.stop
      v-on="$myListeners"
    ></component>
  </div>
</template>

<script>
export default {
  components: {
    formCascader: () => import("@/components/form/cascader"),
    formCheckbox: () => import("@/components/form/checkbox"),
    formCheckboxGroup: () => import("@/components/form/checkboxGroup"),
    formColorPicker: () => import("@/components/form/colorPicker"),
    formDatePicker: () => import("@/components/form/datePicker"),
    formEditor: () => import("@/components/form/editor"),
    formHidden: () => import("@/components/form/hidden"),
    formInput: () => import("@/components/form/input"),
    formInputNumber: () => import("@/components/form/inputNumber"),
    formPassword: () => import("@/components/form/password"),
    formRadioGroup: () => import("@/components/form/radioGroup"),
    formRadio: () => import("@/components/form/radio"),
    formSelect: () => import("@/components/form/select"),
    formSteps: () => import("@/components/form/steps"),
    formSwitch: () => import("@/components/form/switch"),
    formTransfer: () => import("@/components/form/transfer"),
    formTag: () => import("@/components/form/tag"),
    formSlider: () => import("@/components/form/slider"),
    formUpload: () => import("@/components/form/upload"),
    formIcon: () => import("@/components/form/icon"),

    buttonInput: () => import("@/components/button/input"),
  },
  props: {
    componentName: [String],
    generalClass: {
      type: String,
      default: "general",
    },
    value: [String, Number, Object, Array, Boolean, Date],
  },
  created() {},
  computed: {
    $myProps() {
      return this.$public.inheritProps(this);
    },
    $myListeners() {
      return this.$public.inheritListeners(this);
    },
  },
};
</script>

<style>
.general {
  margin: 2px;
  /* width: 124px; */
  display: inline-block;
}
</style>
